@gray: #333;
@color: #188fff;
@color2: #49b0ff;
@color3: #7680ff;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
	@{atr}: unit(@px*10/@baseWidth , rem);
}

.Comm{
    display: flex;
    flex-wrap: wrap;
    .items{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        .px2rem(border-radius, 10);
        overflow: hidden;
        .header{
            text-align: center;
            background-color: @color;
            color: #fff;
            .px2rem(padding, 8);
            span{
                .px2rem(font-size, 18);
                white-space: nowrap;
            }
            .icon{
                display: inline-block;
                .px2rem(font-size, 24);
                .px2rem(padding-right, 5);
                .px2rem(height, 24);
            }
        }
        &.isColorful{
            text-align: left;
            &:nth-child(6n-5){
                .header{
                    background-color: #4482ff;
                }
            }
            &:nth-child(6n-4){
                .header{
                    background-color: #58d6cb;
                }
            }
            &:nth-child(6n-3){
                .header{
                    background-color: #7184fc;
                }
            }
            &:nth-child(6n-2){
                border-color: #2696ff;
                .header{
                    background-color: #2696ff;
                }
            }
            &:nth-child(6n-1){
                border-color: #63a9ff;
                .header{
                    background-color: #63a9ff;
                }
            }
            &:nth-child(6n){
                border-color: #8a5cfd;
                .header{
                    background-color: #8a5cfd;
                }
            }
        }
        
        margin: 2%;
        &.col-12{
            width: 46%;
        }
        
        .inner{
            text-align: center;
            .px2rem(padding-top, 10);
            .px2rem(padding-bottom, 10);
            .px2rem(font-size, 18);
            .px2rem(line-height, 36);
            .num{
                color: #4482ff;
                .px2rem(font-size, 30);
                .px2rem(line-height, 52);
            }
            .list{
                label{
                    white-space: nowrap;
                }
                .success{
                    color: #ff432a;
                }
                .error{
                    color: #4dca72;
                }
            }
        }
    }
}